<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>牛播王-首页</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body id="index">
<div class="header ">
    <div class="w">
        <h1 class="logo"></h1>

        <ul class="nav">
            <li class="nav-home"><a>首页</a></li>
            <li  class="nav-nbt"><a>牛播厅</a></li>
            <li  class="nav-mtzy"><a>新闻资讯</a></li>
            <li><a>关于我们</a></li>
        </ul>
    </div>

</div>
<div class="banner">
    <div class="bg-box">
        <div class="bg bg-00">
            <div class="w">
                <div class="bn-ar ">
                    <div class="qui">
                        <img src="images/bn-01-ar.png" />
                    </div>

                    <img class="tet" src="images/bn-01-ar-tet.png" />
                    <img class="shadow" src="images/bn-01-ar-shadow.png" />

                </div>
            </div>
        </div>
        <div class="bg bg-01"></div>
        <div class="bg bg-02"></div>
    </div>
    <div class="w">
        <div class="section-wrap">
            <div class="section-scroll">
                <div class="section section-01">
                    <div class="section-bk">
                        <h3>致力于广告整合的平台 打破广告原有的模式</h3>
                        <p>作为吃瓜群众看个广告也被礼包砸中！<br/>
                            牛播王为群众提供各类店铺第一时间的优惠信息；还有AR寻宝，摇一摇等丰富的线上线下活动，有趣的玩法外加丰富的礼品、红包等你来拿！</p>
                        <a>下载&注册</a>
                    </div>

                </div>
                <div class="section section-02">
                    <div class="section-bk">
                        <h3>适合中小微企业发广告的平台 通过手机一键发布</h3>
                        <p>
                            将资源进行碎片化，低价化，充分将闲置期，空档期进行整合匹配。从而达到价格更接近平民；通过AR，摇一摇等工具进行互动，帮助客户迅速得到粉丝，提高到店客流量；牛播王能给针对不同的客户提出精确的推广方案，让客户以最小的广告费得到最大的推广效果。</p>
                        <a>商家入驻</a>
                    </div>

                </div>
                <div class="section section-03">
                    <div class="section-bk">
                        <h3>致力于广告整合的平台 打破广告原有的模式</h3>
                        <p>
                            牛播王开设了众筹购买广告资源、拍卖招标（整合全国的广告招标）等新型广告销售模式。整合广告资源，让广告资源通过平台进行共享，将广告发布者和广告资源拥有者进行匹配的平台。将资源进行碎片化，低价化，充分将闲置期，空档期进行整合匹配。</p>
                        <a>媒体入驻</a>
                    </div>
                </div>
            </div>

        </div>

        <ul class="panel">
            <li class="panel-01 active" style="height: 320px;">
                <h2>我是群众</h2>
                <i class="wire"></i>
                <p>为用户提供优惠信息、创意广告等，便宜实惠,品质保证! AR寻宝、摇一摇抢红包活动有趣又给力！</p>
            </li>
            <li class="panel-02">
                <h2>我是商家</h2>
                <i class="wire"></i>
                <p>商家在牛播王可以有多种媒体方式选择，发布更简便！发起AR等活动与大众客户有更好互动！</p>
            </li>
            <li class="panel-03">
                <h2>我是资源商</h2>
                <i class="wire"></i>
                <p>牛播王为资源商提供销售平台，广告资源可整售可零售，共享广告资源！</p>
            </li>

        </ul>
    </div>

</div>
<div class="train">
    <div class="w">
        <div class="show">
            <img src="images/logo-app.png">
            <h3>专注移动推广，共享广告资源</h3>
            <p>牛播王是一个将 广告发布者 和 广告资源拥有者 进行匹配的平台，整合广告资源，让广告资源通过平台进行共享</p>
        </div>
    </div>
</div>
<div class="bk-01">
    <div class="w">
        <div class="hot-news">
            <div class="hd"><img src="images/hot-news.png"></div>
            <div class="focus-news">
                <div class="slider-wrap">
                    <ul class="slider-main">
                       <!-- <a class="slider-panel" href="#"><img src="tmp/focus.png">
                            <div class="cont">
                                <h3>JSMO后台初步完成，已经进入测试阶段。</h3>
                                <p>千呼万唤始出来，千树万树梨花开。等了这么久，勤劳的技术哥哥马不停蹄的敲着代码，终于JSMO的后台于今日初步完成...</p>
                            </div>
                        </a>
                        <a class="slider-panel" href="#"><img src="tmp/focus.png">
                            <div class="cont">
                                <h3>JSMO后台初步完成，已经进入测试阶段。</h3>
                                <p>千呼万唤始出来，千树万树梨花开。等了这么久，勤劳的技术哥哥马不停蹄的敲着代码，终于JSMO的后台于今日初步完成...</p>
                            </div>
                        </a>
                        <a class="slider-panel" href="#"><img src="tmp/focus.png">
                            <div class="cont">
                                <h3>JSMO后台初步完成，已经进入测试阶段。</h3>
                                <p>千呼万唤始出来，千树万树梨花开。等了这么久，勤劳的技术哥哥马不停蹄的敲着代码，终于JSMO的后台于今日初步完成...</p>
                            </div>
                        </a>
                        <a class="slider-panel" href="#"><img src="tmp/focus.png">
                            <div class="cont">
                                <h3>JSMO后台初步完成，已经进入测试阶段。</h3>
                                <p>千呼万唤始出来，千树万树梨花开。等了这么久，勤劳的技术哥哥马不停蹄的敲着代码，终于JSMO的后台于今日初步完成...</p>
                            </div>
                        </a>-->

                    </ul>
                </div>
                <div class="slider-extra">
                    <ul class="slider-nav">
                       <!-- <li class="slider-item"></li>
                        <li class="slider-item"></li>
                        <li class="slider-item"></li>
                        <li class="slider-item"></li>-->
                    </ul>
                </div>
            </div>

        </div>
        <div class="news-list ">
            <!--<a class="news">
                <div class="bd">
                    <h3>JSMO后台初步完成，已经进入测试阶段。</h3>
                    <p>千呼万唤始出来，千树万树梨花开。等了这么久，
                        勤劳的技术哥哥马不停蹄的敲着代码，终于JSMO
                        的后台于今日初步完成，已经进入了测...</p>
                </div>
                <div class="time">
                    <div class="time-01">07-07</div>
                    <p class="time-02">2017</p>
                </div>
            </a>
            <a class="news">
                <div class="bd">
                    <h3>JSMO后台初步完成，已经进入测试阶段。</h3>
                    <p>千呼万唤始出来，千树万树梨花开。等了这么久，
                        勤劳的技术哥哥马不停蹄的敲着代码，终于JSMO
                        的后台于今日初步完成，已经进入了测...</p>
                </div>
                <div class="time">
                    <div class="time-01">07-07</div>
                    <p class="time-02">2017</p>
                </div>
            </a>-->
        </div>

    </div>
</div>
<div class="bk-02">
    <div class="w">
        <div class="cont">
            <h2>体验手机快速下单</h2>
            <p>
                发布广告全新体验，手机直接下单，如出租车led广告、公交车车身广告等。以最便捷的方式、最快的速度为您提供服务，与媒体深入合作，将企业内容推荐到媒体核心位置，极大提升曝光率，致力为中小企业发展提供营销推广协助。</p>
        </div>
        <ul class="flow">
            <li class="active">
                <p>
                    点击发布<br>
                    填写参数
                </p>
                <div class="flow-01"></div>
            </li>
            <li >
                <p>
                    点击发布<br>
                    填写参数
                </p>
                <div class="flow-02"></div>
            </li>
            <li >
                <p>
                    审核完成<br>
                    发布广告
                </p>
                <div class="flow-03"></div>
            </li>
        </ul>
        <div class="iphone">
            <div class="flow-wrap">
                <div class="flow-scroll">
                    <div class="flow-item" style="background-color: red"><img src="images/flow-01.png"></div>
                    <div class="flow-item" style="background-color: green"><img src="images/flow-02.png"></div>
                    <div class="flow-item" style="background-color: blue"><img src="images/flow-03.png"></div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="bk-03">
    <div class="w">
        <h2 class="title">这里，有多种媒体资源</h2>
        <div class="focus-item">
            <div class="slider-wrap">
                <div class="slider-main">
                    <div class="slider-panel">
                        <ul>
                            <li>
                                <a>
                                    <img src="images/kind-01.png"/>
                                    <strong>公交媒体</strong>
                                    <p>
                                        公交车身、候车亭(灯箱)<br/>
                                        公交内部、公交站牌</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-02.png"/>
                                    <strong>高速媒体</strong>
                                    <p>服务区(楼顶广告、楼体广告、指路牌)<br/>
                                        高炮、收费站、跨线桥、指路牌</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-03.png"/>
                                    <strong>社区媒体</strong>
                                    <p>宣传栏、道旗、灯箱、<br/>道闸、
                                        社区框架、社区LED、电视、快递柜</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-04.png"/>
                                    <strong>交通媒体</strong>
                                    <p>围挡、过街天桥、报刊亭<br/>
                                        电话亭、阅报栏、道旗<br/>
                                        自行车亭、垃圾箱、出租车</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-05.png"/>
                                    <strong>机场媒体</strong>
                                    <p>机票广告、机场灯箱、<br/>内部LED
                                        停车场、廊桥、飞机车身</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-06.png"/>
                                    <strong>火车媒体</strong>
                                    <p>火车电视、灯箱、火车站LED、火车车身<br/>
                                        火车站大牌、桌贴、座椅、行李架</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-07.png"/>
                                    <strong>地铁媒体</strong>
                                    <p>地铁灯箱、包柱、LED显示屏、车贴<br/>
                                        地铁车身、安全门、拉手、kt板</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-08.png"/>
                                    <strong>商超媒体</strong>
                                    <p>楼体大牌、楼顶大牌、LED显示屏<br/>
                                        地下停车库、过街通道、电梯</p>
                                </a>
                            </li>

                        </ul>
                    </div>
                    <div class="slider-panel">
                        <ul>
                            <li>
                                <a>
                                    <img src="images/kind-09.png"/>
                                    <strong>报纸、杂志媒体</strong>
                                    <p>公交车身、候车亭(灯箱)公交内部、公交站牌</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-10.png"/>
                                    <strong>电视、广播媒体</strong>
                                    <p>公交车身、候车亭(灯箱)公交内部、公交站牌</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-11.png"/>
                                    <strong>高铁</strong>
                                    <p>进站廊桥玻璃贴、出站通道灯箱、站台层双面灯箱、车外门贴、海报、头片、品牌天幕、桌贴、创意帖、视频</p>
                                </a>
                            </li>
                            <li>
                                <a>
                                    <img src="images/kind-12.png"/>
                                    <strong>线上媒体</strong>
                                    <p>门户网站、视频网站、APP移动、搜索广告、导航广告</p>
                                </a>
                            </li>



                        </ul>
                    </div>
                </div>
            </div>
            <div class="slider-extra">
                <ul class="slider-nav">
                    <li class="slider-item"></li>
                    <li class="slider-item"></li>

                </ul>
            </div>
        </div>
    </div>
</div>
<div class="bk-04">
    <div class="w">
        <h2 class="title">丰富的线上线下活动强力吸粉</h2>
        <div class="activity">
            <ul>
                <li>
                    <img src="tmp/activity-01.png"/>
                    <a>
                        <h4>优惠券介绍</h4>
                        <p>为企业提供优惠信息展示平台。牛播王的海量用户都可看到您的优惠信息，优惠券即领即用，方便快捷！</p>
                    </a>
                </li>
                <li>
                    <img src="tmp/activity-02.png"/>
                    <a>
                        <h4>AR实景红包介绍</h4>
                        <p>为企业提供AR活动定制服务。识别图、AR播放效果专属定制，顾客扫一扫即有机会得到礼包，可有效吸引客流量，提高转化率。</p>
                    </a>
                </li>
                <li>
                    <img src="tmp/activity-03.png"/>
                    <a>
                        <h4>摇一摇介绍</h4>
                        <p>为企业提供乐趣营销工具。可冠名牛播王举办的“摇王”周季赛，“摇王”年度决赛，让顾客在玩乐中赢奖品，做互动，切实拉动销售。</p>
                    </a>
                </li>
                <li>
                    <img src="tmp/activity-04.png"/>
                    <a>
                        <h4>口令红包介绍</h4>
                        <p>为企业提供品牌展示窗口。在红包图片中展示品牌形象，在口令中输入宣传语，以小成本获得更为直观、可量化的传播效果。</p>
                    </a>
                </li>

            </ul>
        </div>
    </div>
</div>
<div class="bk-05" id="bk-nbt">
    <div class="w">
        <div class="hd"><img src="images/nbt.png"></div>
        <div class="nbt-bab">
            <ul class="tab-hd">

                <!--<li>个人祝福</li>
                <li>商家促销</li>
                <li>求购出售</li>
                <li>吃喝玩乐</li>
                <li>本地服务</li>
                <li class="act">全部</li>-->
            </ul>
            <div class="tab-bd clearfix">
                <!--<a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅安娜西餐厅安娜西餐厅安娜西餐厅安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>
                <a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>
                <a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>
                <a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>
                <a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>-->
            </div>

        </div>
    </div>
</div>
<div class="bk-05"  id="bk-mtzy">
    <div class="w">
        <div class="hd"><img src="images/nbt2.png"></div>
        <div class="nbt-bab">
            <ul class="tab-hd">

                <!--<li>个人祝福</li>
                <li>商家促销</li>
                <li>求购出售</li>
                <li>吃喝玩乐</li>
                <li>本地服务</li>
                <li class="act">全部</li>-->
            </ul>
            <div class="tab-bd clearfix">
                <!--<a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅安娜西餐厅安娜西餐厅安娜西餐厅安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>
                <a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>
                <a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>
                <a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>
                <a class="tab-item">
                    <img src="tmp/poto.png"/>
                    <div class="cont">
                        <strong>安娜西餐厅</strong>
                        <p>仅售99元！价值138元的精品波士顿龙
                            虾1份，提供免费WiFi。</p>
                    </div>
                </a>-->
            </div>

        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-01">
        <div class="w">
            <div class="qr-code">
                <h4>扫码下载牛播王APP</h4>
                <ul>
                    <li>
                        <img src="images/ios-code.png"/>
                        <div class="version Ios">
                            <p>IOS 下载 : V4.18.0</p>
                            <p>更新时间 : 2017-06-01</p>
                        </div>
                    </li>
                    <li>
                        <img src="images/Android-code.png"/>
                        <div class="version Android">
                            <p>Android 下载 : V4.18.0</p>
                            <p>更新时间 : 2017-06-01</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="contact-us">
                <h5>客服热线</h5>
                <p class="mobile">400-928-1222</p>
                <h5>企业QQ</h5>
                <p class="qq">2853882960</p>
            </div>
            <div class="attention">
                <h4>关注我们</h4>
                <div class="bd">
                    <ul class="clearfix">
                        <li>
                            <img src="images/wx-code.png"/>
                            <p>微信公众号</p>
                        </li>
                        <li>
                            <img src="images/microblog-code.png"/>
                            <p>微博</p>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <div class="footer-02">
        <div class="w">
           <!-- <div class="links">
                <a>关于牛播王</a>
                <a>加入我们</a>
                <a>联系我们</a>
                <a>法律声明</a>
            </div>-->
            <p class="copyright">Copyright © 2016 niubow.com All Rights Reserved 新儒家文化有限公司版权所有 沪ICP备15013245号-1</p>
        </div>
    </div>
</div>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="libs/switchable/jQuery.switchable.js"></script>

<script>
    $(function () {


       var $focusNews= $(".focus-news");
        var $sliderMain=$focusNews.find(".slider-main");
        var $sliderNav=$focusNews.find(".slider-nav");
        var $newsList=$(".news-list");
        var $nbtBab=$(".nbt-bab");


        var newsHtml=function (time,title,cont,k) {
            var t=time.split("/")
            console.log(t)
            return '<a class="news"  href="page.html?lsit='+k+'">'+
                    '<div class="bd">'+
                    '<h3>'+title+'</h3>'+
                    '<p>'+cont.replace(/<[^>]+>/g,'').substr(0,60)+'</p>'+
                    '</div>'+
                    '<div class="time">'+
                    '<div class="time-01">'+t[0]+'</div>'+
                    '<p class="time-02">'+t[1]+'</p>'+
                    '</div>'+
                    '</a>';

        };
        var newsTabHtml=function (img,title,cont,k) {
            return ' <a class="slider-panel" href="page.html?lsit='+k+'"><img src="'+img+'">'+
                    ' <div class="cont">'+
                    ' <h3>'+title+'</h3>'+
                    ' <p>'+cont.replace(/<[^>]+>/g,'').substr(0,50)+'</p>'+
                    ' </div>'+
                    ' </a>';

        };
        var tabBdHtml=function (list) {
            var listStr=""

            $.each(list,function (k,o) {
                listStr+='<a class="tab-item">'+
                    '<img src="'+o.img+'"/>'+
                    '<div class="cont">'+
                    '<strong>'+o.title+'</strong>'+
                    '<p>'+o.content+'</p>'+
                    '</div>'+
                    '</a>'
            })
            return listStr
        }





        function headerScroll() {
            if ($(this).scrollTop() > 35) {
                $(".header").addClass("scroll").animate({
                    top:0
                },{
                    duration: 850,
                    easing:"easeOutExpo"
                })
            } else {
                $(".header").removeClass("scroll").animate({
                    top:0
                },{
                    duration:850,
                    easing:"easeOutExpo"
                })
            }
        }
        function bannerSwitch() {
            var index = 0
            var lastIndex = 0
            var $panelLi = $(".panel li")
            var $banner = $(".banner")
            var $section = $(".section-wrap .section")
            var $sectionScroll = $(".section-scroll")
            var $bnAr=$(".bn-ar")
            $banner.find(".bg-box .bg").eq(0).fadeIn({
                duration: 500,
                easing:"easeOutExpo"
            })
            var left = 1210;


            function sectionScrollAnimate(idx, lIdx ,method) {

                $section.eq(lIdx).find(".section-bk").hide()

                var eh3=380;
                var ep=300;
                var ea=160;

                if(idx==0){
                    $bnAr.find(".shadow").fadeIn()
                    $bnAr.find(".qui").fadeIn({
                        easing: method,
                        duration: 900,
                        complete:function () {
                            $(this).animate({
                                top: 0
                            }, {
                                easing: "easeOutElastic",
                                duration: 950,
                                complete:function () {
                                    $(this).addClass("Rotation")

                                }
                            })
                        }

                    });
                }else {
                    $bnAr.find(".qui").removeClass("Rotation").css({
                        top:-100,
                        display:"none"
                    })

                }

                if(idx>lIdx){
                    $section.eq(idx).find("h3").css({
                        left: -eh3
                    })
                    $section.eq(idx).find("p").css({
                        left: -ep
                    })
                    $section.eq(idx).find("a").css({
                        left: -ea
                    })
                }else {
                    $section.eq(idx).find("h3").css({
                        left: eh3
                    })
                    $section.eq(idx).find("p").css({
                        left: ep
                    })
                    $section.eq(idx).find("a").css({
                        left: ea
                    })
                }
                //当前



                $section.eq(idx).find("h3").animate({
                    left: 0
                }, {
                    easing: method,
                    duration: 650
                })
                $section.eq(idx).find("p").animate({
                    left: 0
                }, {
                    easing:method,
                    duration: 650
                })
                $section.eq(idx).find("a").animate({
                    left: 0
                }, {
                    easing: method,
                    duration: 650
                })


                $section.eq(idx).find(".section-bk").show({
                    duration: 850,
                    easing:  method,
                })
                $sectionScroll.stop().animate({
                    left: -idx * left
                }, {
                    easing: method,
                    duration: 650
                });


            }



            sectionScrollAnimate(0, 1,"swing")
            $panelLi.on("mouseenter", function () {
                var $self = $(this)
                index = $self.index()
                if (lastIndex == index) return

                console.log(index)
                $banner.find(".bg-box .bg").eq(lastIndex).stop().fadeOut()
                $banner.find(".bg-box .bg").eq(index).fadeIn({
                    duration: 500,
                    easing:"easeOutExpo"
                })
                sectionScrollAnimate(index, lastIndex,"swing")
//            $banner.removeClass("ban-0" + lastIndex).addClass("ban-0" + index)
                $panelLi.eq(index).addClass("active").stop().animate({
                    height: 320
                }, 300)
                $panelLi.eq(lastIndex).removeClass("active").stop().animate({
                    height: 280
                }, 300)
                lastIndex = index


            })
        }
        function flowSwitch(){
            var $flow=$(".flow")
            var $flowLi=$flow.find("li")
            var flowScroll=  $(".flow-wrap .flow-scroll")
            var left=250;
            var timer=null;
            var index=0
            function flowSwitchAnimate(idx) {
                $flowLi.removeClass("active")
                $flowLi.eq(idx).addClass("active")

                flowScroll.stop().animate({
                    left:-left*idx
                },{
                    easing:"swing",
                    duration: 350
                })
            }
            function autopaly() {
                timer=setInterval(function () {
                    index++
                    if(index>2){
                        index=0
                    }
                    flowSwitchAnimate(index)
                },3000)
            }
            autopaly()
            $flowLi.on("mouseenter",function () {
                clearInterval(timer)

                index=$(this).index()
                flowSwitchAnimate(index)

            })
            $flowLi.on("mouseleave",function () {
                autopaly()
            })


        }
        function  activityHover() {
            $(".activity li").hover(function () {
                $(this).find("a").stop().animate({
                    top:0
                },{
                    easing:"swing",
                    duration: 650
                })
            },function () {
                $(this).find("a").stop().animate({
                    top:360
                },{
                    easing:"swing",
                    duration:50
                })
            })
        }
        function nbttab(elem,url) {
            elem.find(".nbt-bab .tab-hd li").on("click",function () {
                var dataType=$(this).attr("data-type")
                var tabhBd="";
                $(this).addClass("act").siblings("li").removeClass("act")
                elem.find(".nbt-bab .tab-bd").empty()
                $.get(url).done(function (res) {
                    console.log(res.nbt[dataType].list)
                    elem.find(".nbt-bab .tab-bd").append(tabBdHtml(res.nbt[dataType].list))
                })
            })
        }

        $.get("./data.json").done(function (res) {
            console.log(res)
            var newsTabStr="";
            var newsNavStr="";
            var newsStr="";
            var tabhHd="";
            var tabhBd="";
        /*    $.each(res.newsTab,function (k,v) {

                newsTabStr+=newsTabHtml(v.img,v.title,v.content,k)
                newsNavStr+='<li class="slider-item"></li>'
            });*/

            $.each(res.news,function (k,v) {

                if(v.tab){
                    newsTabStr+=newsTabHtml(v.img,v.title,v.content,k)
                    newsNavStr+='<li class="slider-item"></li>'
                }else {
                    console.log(v)
                    newsStr+=newsHtml(v.time,v.title,v.content,k)
                }


            });

            $.each(res.nbt,function (k,v) {
                console.log(k)
                if(k==0){
                    tabhHd+='<li class="act" data-type="'+k+'">'+v.typeName +'</li>'

                    tabhBd=tabBdHtml(v.list)
                }else {
                    tabhHd+='<li data-type="'+k+'">'+v.typeName +'</li>'
                }



            });

            $sliderMain.append(newsTabStr)
            $sliderNav.append(newsNavStr)
            $newsList.append(newsStr)
            $nbtBab.find(".tab-hd").append(tabhHd)
            $nbtBab.find(".tab-bd").append(tabhBd)
            $(".focus-news").switchable({
                type: "slider",
                contentClass: "slider-main",
                mainClass: "slider-panel",
                navItem: "slider-item",
                navSelectedClass: "slider-active",
                stayTime: 4e3,
                isAutoPlay:true,
                seamlessLoop:true

            })
            $(".focus-item").switchable({
                type: "slider",
                contentClass: "slider-main",
                mainClass: "slider-panel",
                navItem: "slider-item",
                navSelectedClass: "slider-active",
                stayTime: 5e3,
                isAutoPlay:true
            })

            nbttab($("#bk-nbt"),"./data.json")
            nbttab($("#bk-mtzy"),"./data.json")
        })


        headerScroll()
        $(window).scroll(headerScroll);
        bannerSwitch()
        flowSwitch()
        activityHover()

        $(".nav-home,.logo").on("click",function () {
            $('body,html').animate({ scrollTop: 0 }, {
                easing:"swing",
                duration: 650
            });
        })


        function navScrollTop(elem,targetElem) {
            elem.on("click",function () {
                var t=targetElem.offset().top
                $('body,html').animate({ scrollTop: t }, {
                    easing:"swing",
                    duration: 650
                });
            })
        }

        navScrollTop( $(".nav-nbt"),$("#bk-nbt"))
        navScrollTop( $(".nav-mtzy"),$("#bk-mtzy"))
    })
</script>
</body>
</html>